Component({
  properties: {
    progress: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        if (newVal > oldVal) {
          this.drawCircle();
        }
      }
    },
  },
  data: {
    context: null,
  },
  onLoad: function() {
    const ctx = wx.createCanvasContext('circleCanvas');
    this.setData({ context: ctx });
  },
  methods: {
    drawCircle() {
      const context = this.data.context;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height); //清除画布
      context.beginPath();
      context.arc(context.canvas.width / 2, context.canvas.height / 2, context.canvas.height / 2, -Math.PI / 2, -Math.PI / 2 + 2 * Math.PI * this.properties.progress, false);
      context.lineWidth = 10;
      context.strokeStyle = '#0f0'; //设置进度条颜色
      context.stroke();
    }
  }
})